<script setup lang="ts">
import type { SysDictionaryDataPageQo } from '#/system/dict/dictionaryData'
import { deleteDictDataApi, disableDictDataApi, enableDictDataApi, getDictDataPageListApi } from '@/api/system/dict/dictData'
import { Edit, View } from '@element-plus/icons-vue'
import Details from './dictDataDetails.vue'

const props = withDefaults(defineProps<
  {
    type: string
  }
>(), {
  type: '',
})
let selectionList = $ref<string[]>([])

const open = defineModel<boolean>()

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    label: '名称',
    align: 'center',
    prop: 'name',
  },
  {
    label: '字典值',
    prop: 'dictValue',
    align: 'center',
  },
  {
    label: '回显样式',
    prop: 'dictStyle',
    align: 'center',
    type: 'slot',
  },
  {
    label: '是否默认',
    prop: 'dictDefault',
    align: 'center',
  },
  {
    label: '状态',
    prop: 'status',
    align: 'center',
    type: 'dict',
    dictType: 'status',
  },
  {
    label: '排序值',
    prop: 'dictSort',
    align: 'center',
  },
  {
    label: '备注',
    prop: 'remark',
    align: 'center',
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    type: 'slot',
    width: 200,
  },
]

const detailsRef = $ref<InstanceType<typeof Details>>()

const [search, resetClk] = useResetState<SysDictionaryDataPageQo>(
  { pageNum: 1, pageSize: 10, total: 0, dictType: props.type },
  () => {
    loadedTable()
  },
  ['dictType'],
)

const { loadedTable, tableData, loading, paginationChange } = useTablePaging(
  getDictDataPageListApi,
  search,
)
// 打开对话框
async function openDialog(action: DialogAction, id?: string) {
  if (!detailsRef)
    return
  const { type } = await detailsRef?.showDialog({
    title: `${DialogActionMap[action]}字典内容`,
    action,
    model: {
      id,
      dictType: props.type,
    },
  })
  if (!type)
    return
  loadedTable()
}

// 删除
const [deleteBatch] = useDeleteBatch($$(selectionList), deleteDictDataApi, () => {
  loadedTable()
  selectionList = []
})
// 启用
const [enable] = useEnable($$(selectionList), enableDictDataApi, () => {
  loadedTable()
  selectionList = []
})
// 禁用
const [disable] = useDisable($$(selectionList), disableDictDataApi, () => {
  loadedTable()
  selectionList = []
})

watch(open, () => {
  if (!open.value) {
    selectionList = []
    return
  }
  search.dictType = props.type
  loadedTable()
})
</script>

<template>
  <el-drawer
    v-model="open"
    title="字典数据列表"
    size="80vw"
  >
    <div
      un-flex="~ col"
      un-h="full"
    >
      <el-form
        :inline="true"
        :model="search"
        un-grid="~ cols-4"
        un-m-b="2.5"
        class="single-row-search-form"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="search.name" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <sy-dict
            v-model="search.status"
            dict-type="status"
            placeholder="请选择状态"
            type="select"
          />
        </el-form-item>
        <el-form-item>
          <sy-search-button @search="loadedTable" @reset="resetClk" />
        </el-form-item>
      </el-form>
      <sy-table
        v-model:selection="selectionList"
        row-key="id"
        border
        selection-chenge-use="id"
        :loading="loading"
        height="100%"
        :columns="columns"
        :data="tableData"
        :paging="search"
        @paging-change="paginationChange"
        @refresh="loadedTable"
        @click-add="openDialog('add')"
        @click-del="deleteBatch"
      >
        <template #header="{ disabled }">
          <el-button
            plain
            type="primary"
            :disabled
            @click="enable"
          >
            启用
          </el-button>
          <el-button
            plain
            type="danger"
            :disabled
            @click="disable"
          >
            禁用
          </el-button>
        </template>
        <template #dictStyle="{ row }">
          <el-tag v-if="row.dictStyle" :type="row.dictStyle">
            {{ row.dictStyle }}
          </el-tag>
        </template>
        <template #operation="{ row }">
          <el-button
            link
            type="primary"
            @click="openDialog('views', row.id)"
          >
            <template #icon>
              <el-icon><View /></el-icon>
            </template>
            查看
          </el-button>
          <el-button
            link
            type="primary"
            @click="openDialog('edit', row.id)"
          >
            <template #icon>
              <el-icon><Edit /></el-icon>
            </template>
            编辑
          </el-button>
        </template>
      </sy-table>
    </div>
    <Details ref="detailsRef" />
  </el-drawer>
</template>

<style scoped>

</style>
